export default {
  mounted(el) {
    el.addEventListener('mousemove', (e) => {
      const rect = el.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top
      const centerX = rect.width / 2
      const centerY = rect.height / 2
      const rotateY = ((x - centerX) / centerX) * 12
      const rotateX = ((centerY - y) / centerY) * 10
      el.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.08)`
      el.style.setProperty('--glare-x', `${x}px`)
      el.style.setProperty('--glare-y', `${y}px`)
    })
    el.addEventListener('mouseleave', () => {
      el.style.transform = ''
      el.style.setProperty('--glare-x', `-100px`)
      el.style.setProperty('--glare-y', `-100px`)
    })
  }
}
